<!DOCTYPE html>
<html lang="en">

<head >
    <title>美食网站</title>
    <!-- for-mobile-apps -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="./css/login.css">
    <script src="./js/jQuery-1.11.1.min.js"></script>
    <script src="./js/login.js"></script>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
         <!-- header -->
    <div class="header">
        <div class="container">
            <div class="header-nav">
                <nav class="navbar navbar-default">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="index.html"><img src="images/logo.png"></a>
                    </div>
                    <div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="hvr-bounce-to-bottom"><a href="index.html">主页</a></li>
                            <li class="hvr-bounce-to-bottom"><a href="about.html">关于</a></li>
                            <li class="hvr-bounce-to-bottom"><a href="menu.html">菜谱</a></li>
                            <li class="hvr-bounce-to-bottom"><a href="blog.html">论坛交流</a></li>
                            <li class="hvr-bounce-to-bottom"><a href="contact.html">发布</a></li>
                            <li class="hvr-bounce-to-bottom active"><a href="login.html">登录</a></li>
                        </ul>
                    </div>

                </nav>
            </div>
        </div>
    </div>
    <!-- //header -->
    <div class="login_title">欢迎来到西南林业大学食堂</div>
    <div class="login_page">
        <div class="nl_loginbox_w" id="mswz_loginbox">
            <div class="loginbox_title">
                　<a href="javascript:;" class="current"  id="login_acc_tab">{{title}}</a>
            </div>
            <div class="nl_loginbox_w_w" id="nl_loginbox_w_w">
                
                <div class="nl_loginbox_w1" id="nl_loginbox_w1" v-if="opt==1">
                        <div class="nl_loginitem">
                            <input type="text" id="username" class="username" name="username" placeholder="请输入账号" v-model="username">
                        </div>
                        <div class="nl_loginitem">
                            <input type="hidden" name="login_type" value="2">
                            <input type="password" class="password" name="password" placeholder="请输入密码" v-model="pwd">
                           
                        </div>
                        <div class="err" style="display: none;">您输入的账户或密码错误！</div>
                   
                    <div class="nl_loginitem" style="text-align:center;">
                        <input type="button" class="submit" value="登 录" @click="login">
                    </div>
                </div>
                <div class="register" v-if="opt==2">
                    <div class="nl_loginitem">
                        <input type="text" id="username" class="username" name="username" placeholder="请输入用户名" v-model="register.username">
                    </div>
                    <div class="nl_loginitem">
                        <input type="password" id="password" class="username" name="username" placeholder="请输入密码" v-model="register.password">
                    </div>
                    <div class="nl_loginitem">
                        <input type="text" id="email" class="username" name="username" placeholder="请输入邮箱" v-model="register.email">
                    </div>
                    <div class="nl_loginitem" style="text-align:center;">
                        <input type="button" class="submit" value="注册" @click="toRegister">
                    </div>
                </div>
                <div class="nl_loginitem" style="height:20px;line-height:20px;">
                    <!-- <label class="label2">
                        <input type="checkbox" checked="checked" class="checkbox" >下次自动登录　　
                        <a href="javascript:void(0)" class="forgetpassword1">忘记密码？</a>
                    </label> -->
                </div>

                
            </div>
        </div>
        <a href="javascript:void(0)" class="golink" id="nl_gozc" opened="0" @click="checkOpt">{{a}}</a>
        

      
    </div>
    </div>
    </div>
</body>

</html>
<script>
    new Vue({
        el:"#app",
        data:{
            hello:"helloWorld",
            username:"",
            pwd:"",
            title:"账号密码登录",
            opt:1,//1登录 2注册
            a:"没有账号请先注册哦",
            register:{
                username:"",
                password:"",
                email:""
            }
        },
        // 创建就运行
        created() {
            // 判断是否登录
            if(sessionStorage.getItem("username")){
                window.location.href = "index.html"
            }
           

        },
        // 方法
        methods: {
            checkOpt(){
                if(this.opt == 1){
                    this.opt = 2
                    this.title = "注册"
                    this.a = "返回登录"
                }else{
                    this.opt = 1
                    this.title = "账号密码登录"
                    this.a  = "没有账号请先注册哦"
                }
            },
            async toRegister(){
                if (!this.register.username || !this.register.password || !this.register.email) {
                    alert("请输入注册信息");
                    return;
                }
                // 准备数据
                const data = {
                    "username":this.register.username,
                    "password":this.register.password,
                    "email":this.register.email
                }
                // 发送请求
                const response = await fetch("http://127.0.0.1:5001/user/addUser",{
                    method: 'POST',
                    headers:{
                        'Content-Type':'application/json'
                    },
                    body:JSON.stringify(data)
                })
                const user = await response.json()
                if(user.code==200){
                    // 注册成功
                    alert("注册成功，请登录")
                    this.checkOpt()
                }else{
                    alert("注册失败")
                    
                }
            },
            async login(){
                if (!this.username || !this.pwd) {
                    alert("账户和密码不能为空");
                    return;
                }
                // 准备数据
                const data = {
                    "username":this.username,
                    "password":this.pwd
                }
                // 发送请求
                const response = await fetch("http://127.0.0.1:5001/user/login",{
                    method: 'POST',
                    headers:{
                        'Content-Type':'application/json'
                    },
                    body:JSON.stringify(data)
                })
                const user = await response.json()
                if(user.data != null && user.data.length >0){
                    sessionStorage.setItem("username",user.data[0]["username"])
                    sessionStorage.setItem("id",user.data[0]["id"])
                    sessionStorage.setItem("number",user.data[0]["number"])
                    sessionStorage.setItem("auth",user.data[0]["auth"])
                    sessionStorage.setItem("img_url",user.data[0]["img_url"])
                    // 登录成功
                    window.location.href = 'index.html'
                }else{
                    alert("登录失败")
                    this.username = ""
                    this.pwd = ""
                }
            }
        }
    })
</script>